<template>

    <div class="page-100 ">
        <div class="header-title">
            <p>联系方式</p>
        </div>
        <div style="background-color: white;height: 30%;border-bottom: 1px solid #e5e5e5;">
            <p class="leftname">发起人：{{username}}</p>
            <p class="leftname ">机构-部门：{{jigoubumen}}</p>
            <p class="leftname">联系电话：{{contactNumber}}</p>
            <p class="leftname">送货地址：{{addr}}</p>
        </div>
        <div class="header-title">采购明细</div>
        <div class="mui-flex" v-for="(item,index) in dataList">
            <div class="cell3" >
                <p class="left-title"> {{item.name}}{{item.brand}}{{item.type_no}}</p>
            </div>
            <div class="cell3">
                <p class="cenrer-title"> {{item.specName}}</p>
            </div>
            <div class="cell">
                <p class="right-title"> {{item.amounts}}件</p>
            </div>
        </div>
        <div v-if="isshow">
            <div class="header-title">备注</div>
            <!--<yd-cell-item>-->
                <p  class="remark" >{{remark}}</p>
            <!--</yd-cell-item>-->
        </div>

    </div>
</template>

<script>
    import {orderDetails} from "../../pcof/post";
    import {userInfoData,qn_domain} from '../../globalVariables'

    export default {
        name: "officeOrderDetail",

        data() {
            return {
                username:'',
                isshow:true,
                isshowButton:false,
                orderUuid:'',
                jigoubumen:'',
                contactNumber:'',
                addr:'',
                dataList:[],
                remark:'',
            }
        },
       async  created()
        {
            this.orderUuid =this.$route.params.orderUuid;
            // 办公用品详情页 orderUuid 单子的id  orderDetails
            var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
            console.log(this.orderUuid);
            this.$dialog.loading.open('加载中...');

            var response = await orderDetails(mobile, this.orderUuid);
            if (response.data.code === 200) {
                this.$dialog.loading.close();

                if (response.data.data.deptName === '' || response.data.data.deptName === null) {
                    this.jigoubumen = response.data.data.instName;

                } else {
                    this.jigoubumen = response.data.data.instName + response.data.data.deptName;

                }
                this.username=response.data.data.applierName;
                this.contactNumber = response.data.data.contactNumber;
                this.addr = response.data.data.addr + response.data.data.room;
                this.dataList = response.data.data.commodities;
                if (response.data.data.remark === '' || response.data.data.remark === null) {
                    this.remark = '';
                    this.isshow = false;

                } else {
                    this.remark = response.data.data.remark;
                    this.isshow = true;
                }

            } else {
                this.$dialog.loading.close();
                this.$dialog.toast({
                    mes: response.data.msg,
                    timeout: 1500
                });
            }
        },
        methods: {

        }

    }
</script>
 <style lang='scss'>
     .header-title {
         color: #9a9a9a;
         font-size: 0.2rem;
         text-align: left;
         border-bottom: 1px solid #e5e5e5;
         padding-top: 0.25rem;
         padding-left: 0.3rem;
         padding-bottom: 0.15rem;
         background-color: #fafafa;

     }
     .leftname {
         float: left;
         margin-right: 0.3em;
         padding-left: 0.3rem;
         text-align: left;
         font-size: 0.25rem;
         color: #585858;
         width: 90%;
         height: 20%;
         margin-top: 10px;

     }
     .left-title {
         padding-left: 20px;
         text-align: left;
         font-size: 0.25rem;
         color: #585858;
         margin-top: 20px;
         margin-bottom: 10px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...

     }
     .cenrer-title {
         padding-left: 20px;
         text-align: left;
         font-size: 0.20rem;
         color: #9a9a9a;
         margin-top: 20px;
         margin-bottom: 10px;

     }
     .right-title {
         text-align: right;
         font-size: 0.25rem;
         color: #585858;
         margin-top: 20px;
         padding-right: 20px;
         margin-bottom: 10px;
     }
     .remark
     {
         padding: 20px ;
         font-size: 0.25rem;
         text-align: left;
         color: #9a9a9a;
     }
</style>